<template>
  <div class="home">
    <div class="block">
      <el-carousel height="600px">
        <el-carousel-item v-for="(item, idx) in banner" :key="idx">
          <img :src="item.s_photos[0].path" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="zone">
      <div class="hotZone" v-for="(el, idx) in cls" :key="idx">
        <div class="hotZone-top animated bounceInDown">
          <h2>{{ el.name }}专区</h2>
          <h3 @click="next">next</h3>
        </div>
        <hr />
        <!-- <div class="hotZone-bottom">
          <div class="hotZone-shop" v-for="item in el.s_goods" :key="item.id">
            <router-link :to="{ path: '/detail/' + item.id }">
              <div class="shop-img">
                <img :src="item.s_goods_photos[0].path" alt="" />
              </div>
              <div class="shop-name">{{ item.name }}</div>
            </router-link>
          </div>
        </div> -->
        <div class="swiper">
          <swiper class="swiper" :options="swiperOption">
            <swiper-slide v-for="item in el.s_goods" :key="item.id"
              ><router-link :to="{ path: '/detail/' + item.id }">
                <div class="shop-img">
                  <img :src="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="shop-name">{{ item.name }}</div>
              </router-link></swiper-slide
            >
            <!-- <div class="swiper-pagination" slot="pagination"></div> -->
          </swiper>
        </div>
      </div>
    </div>
    <div class="allshop">
      <div class="allshop-top">
        <h1>ALL</h1>
        <hr />
      </div>
      <div class="allshop-bottom">
        <div class="allshop-shop" v-for="(el, idx) in products" :key="idx">
          <router-link :to="{ path: '/detail/' + el.id }">
            <img :src="el.s_goods_photos[0].path" alt="" />{{ el.name }}
          </router-link>
        </div>
      </div>
    </div>
    <div class="member">
      <div class="member-top"><h1>
会员中心
      </h1>
        </div>
      <div class="member-bottom">
        <img src="../assets/image.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { getBannder } from "../api/index";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "swiper-example-multiple-slides-per-biew",
  title: "Multiple slides per view",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      cls: [],
      products: [],
      banner: [],
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 30,
        autoplay:true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  async created() {
    await this.$store.dispatch("classifyGoods");
    this.cls = this.$store.state.cls;
    await this.$store.dispatch("goods");
    this.products = this.$store.state.products.rows;
    getBannder().then((res) => {
      this.banner = res.result.rows;
    });
  },
  methods: {
    next() {
      this.page += 5;
      console.log(this.page);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-carousel img {
  width: 100%;
  height: 100%;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.zone {
  padding: 20px;
}
.hotZone {
  margin-top: 20px;
  margin-bottom: 40px;
  // border: 1px solid black;
  padding: 10px 40px;
  .hotZone-top {
    display: flex;
    justify-content: space-between;
  }
  // .hotZone-bottom {
  //   display: flex;
  //   flex-flow: row wrap;
  //   padding: 20px;
  //   .hotZone-shop {
  //     margin: 20px;
  //     // margin-right: 40px;
  //     text-align: center;
  //     width: 300px;
  //     &:hover {
  //       transform: scale(1.2);
  //     }
  //     a {
  //       color: black;
  //     }
  //     // background-color: white;
  //     // background-color: #f4f4f4;
  //     // border: 1px solid black;
  //     .shop-img {
  //       height: 300px;
  //       width: 300px;
  //       margin: 10px auto;
  //       img {
  //         width: 100%;
  //         height: 100%;
  //       }
  //     }
  //     .shop-name {
  //       margin: 10px;
  //       font-weight: bold;
  //     }
  //   }
  // }
  .swiper {
    margin-top: 20px;
    height: 400px;
    .shop-img {
      height: 300px;
      width: 300px;
      margin: 10px auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .shop-name {
      margin: 10px;
      font-weight: bold;
      text-align: center;
    }
    a{
      color: black;
    }
    .swiper-slide{
       &:hover {
        transform: scale(1.1);
      }
    }
    .swiper-pagination{
      margin-top: 20px;
    }
 
  }
}
.allshop {
  margin-top: 20px;
  // border: 1px solid black;
  padding: 10px 40px;
  // text-align: center;
  .allshop-bottom {
    display: flex;
    // justify-content: space-between;
    flex-flow: row wrap;
    padding: 20px;
    .allshop-shop {
      margin: 30px;
      height: 250px;
      width: 250px;
      margin-right: 40px;
      // border: 1px solid black;
      a {
        color: black;
      }
      &:hover {
        transform: scale(1.1);
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.member{
  margin-top: 50px;
  padding: 30px 40px;
  .member-top{

  margin-bottom: 24px
  }
}
</style>
